<template>
<!-- 切换浅色、深色模式 -->
 <a-switch class="theme_switch" v-model:checked="chenck" @change="checkTemd" >
    <template #checkedChildren>
      <img src="@/assets/moon.png" style="width: 15px; margin-top: -4px" alt="">
    </template>
    <template #unCheckedChildren>
      <img src="@/assets/sun.png" style="width: 15px; margin-top: -4px" alt="">
    </template>
 </a-switch>
 <!-- 设置 -->
<!-- <div class="ringht-top-seting" @click="setingShow = true">
  <SettingOutlined class="seting_rt" style="cursor: pointer;" />
  <div class="seting-body" :class="{'seting-body-show': setingShow}">
    <a-tabs v-model:activeKey="activeKey" tab-position="left" animated>
      <a-tab-pane key="1" tab="切换主题">
        <CheckThemes />
      </a-tab-pane>
      <a-tab-pane key="2" tab="自定义主题">
        <SetingTheme />
      </a-tab-pane>
      <a-tab-pane key="3" tab="设置">
      </a-tab-pane>
    </a-tabs>
  </div>
</div> -->
<SettingOutlined class="seting_rt" @click="setingShow = true" style="cursor: pointer;" />
<a-drawer
    :width="'70%'"
    v-model:visible="setingShow"
  >
  <div class="seting-body">
    <a-tabs v-model:activeKey="activeKey" tab-position="left" animated>
      <a-tab-pane key="1" tab="切换主题">
        <CheckThemes />
      </a-tab-pane>
      <a-tab-pane key="2" tab="自定义主题">
        <SetingTheme />
      </a-tab-pane>
      <a-tab-pane key="3" tab="设置">
      </a-tab-pane>
    </a-tabs>
    <a-button @click="submit">确定</a-button>
  </div>
</a-drawer>
</template>
<script setup lang="ts">
import 'element-plus/es/components/color-picker/style/css'
import CheckThemes from './components/CheckThemes.vue'
import SetingTheme from './components/SetingTheme/index.vue'

import { SettingOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue'
import { useStore } from 'vuex';
const store = useStore()
const activeKey = ref('1')

const setingShow = ref(false)
const chenck = ref(false)
function checkTemd(par: boolean){
  store.commit('app/setIsDrak', par)
}

function submit(){
  store.dispatch('app/setUserSeting')
}
</script>
<style lang="less" scoped>
.ant-switch-checked:focus{
  box-shadow: none;
}
.theme_switch{
  position: absolute;
  right: 100px;
  top: 10px;
  z-index: 10;
}
.seting_rt{
   position: absolute;
   font-size: 20px;
  right: 50px;
  top: 10px;
  z-index: 10;
}
</style>